<template>
    <div class="container-full">

        <!--头部开始-->
        <div class="header" @click="onClick(bannerArr.top.link)" v-if="bannerArr.top && bannerArr.top.imgUrlClient">
            <img :src="bannerArr.top.imgUrlClient" style="width: 100%;">
        </div>
        <!--头部结束-->

        <!--主体开始-->
        <div class="main">

            <div class="floor1">

                <div class="right">
                    <div class="right-1">
                        <img :src="PIC_URL + '/experience/images/bixue2.png'">
                    </div>
                    <div class="right-2">
                        <div @click="onVideoDetail(bannerArr.ltOne,'趋势长盈')" v-if="bannerArr.ltOne && bannerArr.ltOne.imgUrlClient">
                            <img :src="bannerArr.ltOne.imgUrlClient" style="width: 279px;height: 54px;">
                        </div>
                        <div @click="onVideoDetail(bannerArr.ltTwo,'冰火量能')" v-if="bannerArr.ltTwo && bannerArr.ltTwo.imgUrlClient">
                            <img :src="bannerArr.ltTwo.imgUrlClient" style="width: 279px;height: 54px;">
                        </div>
                        <div @click="onVideoDetail(bannerArr.ltThree,'多空决策')" v-if="bannerArr.ltThree && bannerArr.ltThree.imgUrlClient">
                            <img :src="bannerArr.ltThree.imgUrlClient" style="width: 279px;height: 54px;">
                        </div>
                        <div @click="onVideoDetail(bannerArr.rtOne,'盈利模式')" v-if="bannerArr.rtOne && bannerArr.rtOne.imgUrlClient">
                            <img :src="bannerArr.rtOne.imgUrlClient" style="width: 279px;height: 54px;">
                        </div>
                        <div @click="onVideoDetail(bannerArr.rtTwo,'盈利模式')" v-if="bannerArr.rtTwo && bannerArr.rtTwo.imgUrlClient">
                            <img :src="bannerArr.rtTwo.imgUrlClient" style="width: 279px;height: 54px;">
                        </div>
                        <div @click="onVideoDetail(bannerArr.rtThree,'盈利模式')" v-if="bannerArr.rtThree && bannerArr.rtThree.imgUrlClient">
                            <img :src="bannerArr.rtThree.imgUrlClient" style="width: 279px;height: 54px;">
                        </div>
                    </div>
                </div>


                <div class="content">


                    <!--最新文章开始-->
                    <div class="content-1">
                        <div class="content-1-head">
                            <img :src="PIC_URL + '/experience/images/icon3.png'" style="width: 25px;">
                            <span class="content-1-text">最近更新</span>
                        </div>
                        <div class="content-1-group">
                            <div class="content-1-cell" v-for="item in recentUpdate" :key="item.id" @click="item.type == 2 ? onVideo(item) : onArticle(item)">
                                <div class="content-1-cell-1">
                                    <span class="content-1-cell-text">【{{ item.type == 2 ? '视频' : '文章' }}】</span>{{ item.type == 2 ? item.subject : item.articleTitle }}
                                </div>
                                <div>[{{ (item.type == 2 ? item.recordStartTime : item.createTime) | formatDate('MM-DD') }}]</div>
                            </div>
                        </div>
                    </div>
                    <!--最新文章结束-->


                    <div class="content-2">

                        <div style="height: 34px;">
                            <img :src="PIC_URL + '/experience/images/zhanfa.png'"/>
                        </div>

                        <div class="content-2-com" @click="scjdVideo.type == 1 ? onLive(scjdVideo) : onVideo(scjdVideo);">
                            <div class="video">
                                <img :src="scjdVideo.wholeImage" style="width: 100%;height: 100%">
                                <div class="bofang-box">
                                    <img class="bofang" :src="PIC_URL + '/experience/bofang.png'"/>
                                </div>
                            </div>
                        </div>


                        <!-- <div class="content-2-head">
                             <div>
                                 <img :src="PIC_URL + '/experience/images/icon4.png'" style="width: 31px;">
                                 <span class="content-2-text">今日市场焦点</span>
                             </div>
                             <div v-if="scjdVideo.type == 1">
                                 <span class="content-2-sta">直播中</span>
                                 <img :src="PIC_URL + '/experience/images/icon5.png'" style="width: 15px;">
                             </div>
                         </div>
                         <div class="content-2-com" @click="scjdVideo.type == 1 ? onLive(scjdVideo) : onVideo(scjdVideo);">
                             <div class="video">
                                 <img :src="scjdVideo.wholeImage" style="width: 100%;height: 100%">
                                 <img class="bofang" :src="PIC_URL + '/experience/bofang.png'"/>
                             </div>
                             <div class="content-2-cell">
                                 <div>
                                     <img :src="PIC_URL + '/experience/images/icon6.png'" style="width: 17px;">
                                     <span class="content-2-cell-title">{{ scjdVideo.type == 1 ? scjdVideo.title  : scjdVideo.subject }}</span>
                                 </div>
                                 <div>[{{ (scjdVideo.type == 1 ? scjdVideo.beginTime : scjdVideo.recordStartTime) | formatDate('MM-DD') }}]</div>
                             </div>
                         </div>-->
                    </div>

                    <!--                    <div class="content-3" @click="onClick(bannerArr.middle.link)" v-if="bannerArr.middle && bannerArr.middle.imgUrlClient">
                                            <img :src="bannerArr.middle.imgUrlClient">
                                        </div>-->

                </div>

                <div class="left">
                    <div class="left-1">

                        <div class="left-1-head">
                            <img :src="PIC_URL + '/experience/images/icon1.png'" style="width: 25px;">
                            <span class="left-1-head-text">精选视频</span>
                        </div>

                        <div class="left-1-con">
                            <el-carousel trigger="click" height="170px" arrow="never" :autoplay="false" @change="onChange">
                                <el-carousel-item v-for="(item,index) in featureVideos" :key="index">
                                    <div class="video" @click="onVideo(item)">
                                        <img :src="item.wholeImage" style="border-radius: 10px;overflow: hidden;"/>

                                        <div class="bofang-box">
                                            <img class="bofang" :src="PIC_URL + '/experience/bofang.png'"/>
                                        </div>

                                    </div>
                                </el-carousel-item>
                            </el-carousel>

                        </div>

                        <div class="left-1-title" v-for="(item,index) in featureVideos" :key="index" v-show="index == featureVideosIndex" @click="onVideo(item)">
                            <div>{{ item.subject }}</div>
                            <div>{{ item.recordStartTime | formatDate('YYYY/MM/DD') }}</div>
                        </div>

                        <div class="left-1-footer" v-for="(item,index) in featureVideos" :key="index" v-show="index == featureVideosIndex" @click="onVideo(item)">
                            <div v-html="item.standpoint"></div>
                        </div>

                    </div>

                    <!--课程预告开始 -->
                    <div class="left-2">

                        <div class="left-2-head">
                            <div>
                                <img :src="PIC_URL + '/experience/images/icon2.png'" style="width: 25px;">
                                <span class="left-2-head-text">课程预告</span>
                            </div>
                            <div class="left-2-date">{{ time | formatDate('YYYY/MM/DD') }}&nbsp;&nbsp;{{ getWeek }}</div>
                        </div>

                        <div class="left-2-box">
                            <div class="left-2-box-left">昨天</div>
                            <div class="left-2-box-right">
                                <div class="left-2-box-right-p" v-for="item in threeDayVideo.yesterday" :key="item.configId" @click="onVideo(item)">
                                    <div>
                                        <span class="date">{{ item.recordStartTime | formatDate('HH:mm') }}</span>
                                        <span class="desc">{{ item.subject }}</span>
                                    </div>
                                    <div class="left-2-box-right-btn">课程回放</div>
                                </div>
                            </div>
                        </div>

                        <div class="left-2-box">
                            <div class="left-2-box-left red">今天</div>
                            <div class="left-2-box-right">
                                <div class="left-2-box-right-p" v-for="(item,index) in todayArr" :key="index" @click="onLive(item)">
                                    <div v-if="item.type == 2">
                                        <span class="date">{{ item.recordStartTime | formatDate('HH:mm') }}</span>
                                        <span class="desc">{{ item.subject }}</span>
                                    </div>
                                    <div v-if="item.type == 1">
                                        <span class="date">{{ item.beginTime | formatDate('HH:mm') }}</span>
                                        <span class="desc">{{ item.title }}</span>
                                    </div>
                                    <div class="left-2-box-right-btn">进入课堂</div>
                                </div>
                            </div>
                        </div>

                        <div class="left-2-box">
                            <div class="left-2-box-left blue">明天</div>
                            <div class="left-2-box-right">
                                <div class="left-2-box-right-p" v-for="(item,index) in threeDayVideo.tomorrow" :key="index">
                                    <div>
                                        <span class="date">{{ item.beginTime | formatDate('HH:mm') }}</span>
                                        <span class="desc">{{ item.title }}</span>
                                    </div>
                                    <div class="left-2-box-right-btn">敬请期待</div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--课程预告结束-->


                </div>


            </div>

            <div class="floor2">

                <div class="floor2-left red">
                    <div>视频专栏</div>
                </div>

                <div class="floor2-right">

                    <div>
                        <div class="floor2-right-head">
                            <div>
                                <img :src="PIC_URL + '/experience/images/icon7.png'" style="width: 24px;">
                                <span class="floor2-right-title">决策锦囊</span>
                                <span class="floor2-right-zhibo" v-if="timetable != '' && timetable != null">直播中</span>
                                <img :src="PIC_URL + '/experience/images/icon5.png'" class="floor2-right-icon" style="width: 15px;" v-if="timetable != '' && timetable != null">
                            </div>
                            <div class="more" @click="onVideoGroup(videos[0].list[0])">查看更多>></div>
                        </div>
                        <div class="floor2-right-com">
                            <div class="floor2-right-cell" v-for="item in videos[0].list" :key="item.videoId" @click="onVideo(item)">
                                <div class="floor2-right-cell-title">{{ item.subject }}</div>
                                <div>{{ item.recordStartTime | formatDate('MM-DD') }}</div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="floor2-right-head">
                            <div>
                                <img :src="PIC_URL + '/experience/images/icon8.png'" style="width: 24px;">
                                <span class="floor2-right-title">今日市场</span>
                            </div>
                            <div class="more" @click="onVideoGroup(videos[1].list[0])">查看更多>></div>
                        </div>
                        <div class="floor2-right-com">
                            <div class="floor2-right-cell" v-for="item in videos[1].list" :key="item.videoId" @click="onVideo(item)">
                                <div class="floor2-right-cell-title">{{ item.subject }}</div>
                                <div>{{ item.recordStartTime | formatDate('MM-DD') }}</div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="floor2-right-head">
                            <div>
                                <img :src="PIC_URL + '/experience/images/icon9.png'" style="width: 24px;">
                                <span class="floor2-right-title">热点情报</span>
                            </div>
                            <div class="more" @click="onVideoGroup(videos[2].list[0])">查看更多>></div>
                        </div>
                        <div class="floor2-right-com">
                            <div class="floor2-right-cell" v-for="item in videos[2].list" :key="item.videoId" @click="onVideo(item)">
                                <div class="floor2-right-cell-title">{{ item.subject }}</div>
                                <div>{{ item.recordStartTime | formatDate('MM-DD') }}</div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <div class="floor2">

                <div class="floor2-left blue">
                    <div>文章专栏</div>
                </div>

                <div class="floor2-right">

                    <div>
                        <div class="floor2-right-head">
                            <div>
                                <img :src="PIC_URL + '/experience/images/icon10.png'" style="width: 24px;">
                                <span class="floor2-right-title">操盘必读</span>
                            </div>
                            <div class="more" @click="onArticleGroup({articleType:article[0].articleType,title: '操盘必读'})">查看更多>></div>
                        </div>
                        <div class="floor2-right-com">
                            <div class="floor2-right-cell" v-for="item in this.article[0].list" :key="item.articleId" @click="onArticle(item)">
                                <div class="floor2-right-cell-title">{{ item.articleTitle }}</div>
                                <div>{{ item.createTime | formatDate('MM-DD') }}</div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="floor2-right-head">
                            <div>
                                <img :src="PIC_URL + '/experience/images/icon11.png'" style="width: 24px;">
                                <span class="floor2-right-title">潜力报告</span>
                            </div>
                            <div class="more" @click="onArticleGroup({articleType:article[1].articleType,title:'潜力报告'})">查看更多>></div>
                        </div>
                        <div class="floor2-right-com">
                            <div class="floor2-right-cell" v-for="item in article[1].list" :key="item.articleId" @click="onArticle(item)">
                                <div class="floor2-right-cell-title">{{ item.articleTitle }}</div>
                                <div>{{ item.createTime | formatDate('MM-DD') }}</div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="floor2-right-head">
                            <div>
                                <img :src="PIC_URL + '/experience/images/icon12.png'" style="width: 24px;">
                                <span class="floor2-right-title">知耻后勇</span>
                            </div>
                            <div class="more" @click="onArticleGroup({articleType:article[2].articleType,title:'知耻后勇'})">查看更多>></div>
                        </div>
                        <div class="floor2-right-com">
                            <div class="floor2-right-cell" v-for="item in article[2].list" :key="item.articleId" @click="onArticle(item)">
                                <div class="floor2-right-cell-title">{{ item.articleTitle }}</div>
                                <div>{{ item.createTime | formatDate('MM-DD') }}</div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>


            <!--左侧活动开始-->
            <div class="activity">
                <div class="tip" v-if="timetable != '' && timetable != null" @click="onLive(timetable)">
                    <img :src="PIC_URL + '/experience/images/icon18.png'" style="width: 24px;height: 25px;">
                    <div class="tip-com">
                        <div class="title">{{ timetable.channelName }}</div>
                        <div>正在直播中</div>
                    </div>
                </div>

                <div class="refresh" @click="onRefresh">
                    <img :src="PIC_URL + '/experience/images/shaxin.png'" style="width: 51px;height: 89px;margin-top: 10px;"/>
                </div>

                <div @click="onClick('http://www.zx0093.com/act/202205_act_pc.html')">
                    <img :src="PIC_URL + '/experience/images/shuban.png'" style="width: 51px;margin-top: 10px;"/>
                </div>

            </div>
            <!--左侧活动结束-->


            <!--右侧导航开始-->
            <!--            <div class="menu">
                            <div class="menu-head" @click="isMenu = !isMenu">学习园地 <i :class="isMenu ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></div>
                            <div class="menu-common" :class="isMenu ? '' : 'menu-active'">
                                <div class="menu-main">
                                    <div class="menu-box">
                                        <h4><img :src="PIC_URL + '/experience/images/icon13.png'" style="width: 26px;">新手速成</h4>
                                        <ul>
                                            <li v-for="item in xsscVideo" :key="item.videoId" @click="onVideo(item)">{{ item.subject }}</li>
                                        </ul>
                                    </div>
                                    <div class="menu-box">
                                        <h4><img :src="PIC_URL + '/experience/images/icon14.png'" style="width: 26px;">精选视频</h4>
                                        <ul>
                                            <li v-for="item in jxVideo" :key="item.videoId" @click="onVideo(item)">{{ item.subject }}</li>
                                        </ul>
                                    </div>
                                    <div class="menu-box">
                                        <h4><img :src="PIC_URL + '/experience/images/icon15.png'" style="width: 26px;">精选课程</h4>
                                        <ul>
                                            <li v-for="item in jxkcVideo" :key="item.videoId" @click="onVideo(item)">{{ item.subject }}</li>
                                        </ul>
                                    </div>
                                    <div class="menu-box">
                                        <h4><img :src="PIC_URL + '/experience/images/icon16.png'" style="width: 26px;">投资理念</h4>
                                        <ul>
                                            <li v-for="item in tzlnArticle" :key="item.articleId" @click="onArticle(item)">{{ item.articleTitle }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="menu-footer">
                                    <img :src="PIC_URL + '/experience/images/kf.png'" style="width: 175px;height: 39px;">
                                    <div class="menu-footer-box">
                                        <div>
                                            <img :src="PIC_URL + '/experience/images/icon17.png'" style="width: 26px;height: 48px;">
                                        </div>
                                        <div class="menu-footer-box-p">
                                            <p class="menu-footer-title">客服热线：</p>
                                            <p class="menu-footer-phone">0871-68506850</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>-->
            <!--右侧导航结束-->


        </div>
        <!--主体结束-->

        <!--底部开始-->
        <div class="footer" @click="onClick(bannerArr.tail.link)" v-if="bannerArr.tail && bannerArr.tail.imgUrlClient">
            <img :src="bannerArr.tail.imgUrlClient" style="width: 100%;">
        </div>
        <!--底部结束-->

        <!--右侧固定导航-->
        <div class="Sidebar" :style="{top: bannerArr.top ? '597px' : '12px' }">
            <div class="Sidebar-box">
                <img :src="PIC_URL + '/experience/phone.png'" style="width: 31px;margin-right: 8px;"/>
                <div>
                    <p>客服热线：</p>
                    <p>0871-68506390</p>
                </div>
            </div>
            <div class="Sidebar-box">
                <img :src="PIC_URL + '/experience/tousu.png'" style="width: 31px;margin-right: 8px;"/>
                <div>
                    <p>客户投诉：</p>
                    <p>0871-68272610</p>
                </div>
            </div>
        </div>
        <!--右侧固定导航-->


    </div>
</template>

<script>

import videoTtv from "../component/videoTtv";
import articleDetail from "../component/articleDetail";
import allVideo from "../component/allVideo";
import allArticle from "../component/allArticle";
import liveDetail from "../component/liveDetail";
import video from "../component/video";


import {openWeb, windowOpen} from "@/common/common";
import dayjs from 'dayjs'


import {queryBetaTestUp, queryBetaTestDown, systemTime} from "../api/api";
import {Newdetail} from "../script/api";

export default {
    name: "Home",
    data() {
        return {
            bannerArr: {},             //广告
            recentUpdate: [],           //最新更新
            threeDayVideo: {},         //课程预告
            scjdVideo: {},             //今日市场焦点
            featureVideos: [],         //精选视频
            featureVideosIndex: '0',     //精选视频 索引
            todayArr: [],              //课程预告（今日）

            article: [],               //文章专栏
            videos: [],                //视频专栏
            xsscVideo: [],             //新手速成
            jxVideo: [],               //精选视频
            jxkcVideo: [],             //精选课程
            tzlnArticle: [],           //投资理念
            timetable: '',             //左侧直播
            time: new Date().getTime(),  //系统时间

            isMenu: true
        }
    },
    computed: {
        getWeek() {
            let week = dayjs(this.time).day();
            let msg = {0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六'}[week];
            return msg;
        }
    },
    mounted() {
        this.getClientBannerByPlaces();
        this.getQueryBetaTestDown();
        this.getSystemTime();
    },
    methods: {
        //首页广告
        async getClientBannerByPlaces() {
            await queryBetaTestUp().then((res) => {


                this.featureVideos = res.data.featureVideos;
                let banner = res.data.banner;
                let arr = [];
                banner.forEach((item) => {
                    arr[item.place] = item;
                });
                this.bannerArr = arr;

                //最近更新
                let recentUpdate = res.data.recentUpdate;
                for (let item of recentUpdate) {
                    if (item.type == 2) {
                        this.recentUpdate.push({
                            type: 2,
                            ...item.recordedVideo
                        })
                    } else if (item.type == 3) {
                        this.recentUpdate.push({
                            type: 3,
                            ...item.article
                        })
                    }
                }


                //课程预告
                this.threeDayVideo = res.data.threeDayVideo;
                let today = res.data.threeDayVideo.today;
                let todayArr = [];
                for (let item of today) {
                    if (item.recordedVideo != null) {
                        todayArr.push({
                            type: 2,
                            ...item.recordedVideo
                        })
                    } else if (item.timetable != null) {
                        todayArr.push({
                            type: 1,
                            ...item.timetable
                        })
                    }
                }
                this.todayArr = todayArr;

                //今日市场焦点
                if (res.data.scjdVideo.type == 1) {
                    this.scjdVideo = {type: 1, ...res.data.scjdVideo.timetable};
                } else {
                    this.scjdVideo = {type: 2, ...res.data.scjdVideo.recordedVideo};
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        //文章信息
        getQueryBetaTestDown() {
            queryBetaTestDown().then(res => {
                console.log(res.data)

                this.article = res.data.article;
                this.videos = res.data.videos;
                this.xsscVideo = res.data.xsscVideo;
                this.jxVideo = res.data.jxVideo;
                this.jxkcVideo = res.data.jxkcVideo;
                this.tzlnArticle = res.data.tzlnArticle;
                this.timetable = res.data.timetable;

            })
        },
        //系统时间
        async getSystemTime() {
            await systemTime().then(res => {
                this.time = res.data;
            })
        },
        //图片切换
        onChange(index) {
            this.featureVideosIndex = index;
        },
        //点击文章分类
        onArticleGroup(item) {

            this.$layer.iframe({
                content: {
                    content: allArticle, //传递的组件对象
                    parent: this,//当前的vue对象
                    data: {
                        articleType: item.articleType
                    }//props
                },
                area: ['1200px', '700px'],
                title: item.title,
                cancel: () => {//关闭事件
                    //alert('关闭iframe');
                },
                maxmin: true
            });

            /* this.$router.push({
                 path: "/allArticle",
                 query: {articleType},
             });*/
        },
        //点击文章
        onArticle(item) {

            this.$layer.iframe({
                content: {
                    content: articleDetail, //传递的组件对象
                    parent: this,//当前的vue对象
                    data: {
                        newsId: item.articleId,
                        articleType: item.articleType
                    }//props
                },
                area: ['1200px', '700px'],
                title: item.articleTypeName,
                cancel: () => {//关闭事件
                    //alert('关闭iframe');
                },
                maxmin: true
            });
        },
        //点击视频分类
        onVideoGroup(item) {
            this.$layer.iframe({
                content: {
                    content: allVideo, //传递的组件对象
                    parent: this,//当前的vue对象
                    data: {
                        configId: item.configId,
                        videoId: item.videoId
                    }//props
                },
                area: ['1200px', '700px'],
                title: item.channelName,
                maxmin: true,
                shade: true,
            });


            /*this.$router.push({
                path: "/allVideo",
                query: {configId:obj.configId,videoId:obj.videoId},
            });*/
        },
        //点击视频
        onVideo(item) {

            if (item.playbackLink) {
                windowOpen(item.playbackLink);
            } else {
                this.$layer.iframe({
                    content: {
                        content: videoTtv, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {
                            configId: item.configId,
                            videoId: item.videoId
                        }//props
                    },
                    area: ['1200px', '700px'],
                    title: item.channelName,
                    maxmin: true,
                    shade: true,
                });
            }
        },
        //点击直播
        onLive(item) {

            if (item.liveLink) {
                windowOpen(item.liveLink);
            } else {
                this.$layer.iframe({
                    content: {
                        content: liveDetail, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {
                            channelId: item.channelId,
                            channelName: item.channelName,
                            configId: item.configId
                        }//props
                    },
                    area: ['1200px', '700px'],
                    title: item.channelName,
                    maxmin: true,
                    shade: true,
                });
            }
        },
        //点击视频讲解
        onVideoDetail(item, channelName) {

            if (item.newLink) {
                windowOpen(item.newLink);
            } else {
                this.$layer.iframe({
                    content: {
                        content: video, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {
                            recordId: item.link
                        }
                    },
                    area: ['1200px', '700px'],
                    title: channelName,
                    maxmin: true,
                    shade: true,
                });
            }
        },
        //点击打开新页面
        onClick(url) {
            if (url != undefined || url != null) {
                windowOpen(url);
            }
        },
        //刷新页面
        onRefresh() {
            window.location.reload();
        }
    }
}
</script>

<style scoped lang="scss">
img {
    width: 100%;
    height: 100%;
    /* object-fit: cover;*/
}

.bofang-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.red {
    background: #BB100F !important;
}

.blue {
    background: #0F72BB !important;
}


/deep/ .el-carousel__indicators--horizontal {
    left: 230px;
    transform: none;
}

/deep/ .el-carousel__button {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

/deep/ .is-active {

    .el-carousel__button {
        background-color: #BB100F;
    }
}

/deep/ .el-carousel__item {
    border-radius: 10px;
    overflow: hidden;
}

.container-full {
    padding-bottom: 20px;
}

.header {
    width: 100%;
    height: 585px;
}

.main {
    position: relative;
    width: 1000px;
    margin: 12px auto;

    .floor1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .left {
            width: 333px;
            height: auto;

            .left-1 {
                width: 313px;
                height: 308px;
                border: 1px solid #A90306;
                border-radius: 10px;
                margin-bottom: 10px;
                padding: 10px 10px 10px 10px;
                font-size: 16px;

                .left-1-head {
                    display: flex;
                    align-items: center;
                    border-bottom: 2px solid #D72122;
                    padding-bottom: 2px;

                    .left-1-head-text {
                        color: #212121;
                        margin-left: 7px;
                    }
                }

                .left-1-con {
                    width: 100%;
                    height: 171px;
                    margin-top: 8px;

                    .video {
                        position: relative;
                        overflow: hidden;
                        height: 170px;
                        border-radius: 10px;

                        .bofang {
                            position: absolute;
                            left: 145px;
                            top: 50px;
                            z-index: 99;
                            width: 48px;
                            height: 48px;
                            margin: 0 auto;
                        }
                    }
                }

                .left-1-title {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    color: #C81716;
                    margin-top: 15px;
                    margin-bottom: 15px;
                }

                .left-1-footer {
                    font-size: 14px;
                    color: #151515;
                    height: 44px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

            }

            .left-2 {
                width: 313px;
                height: auto;
                border: 1px solid #A90306;
                border-radius: 10px;
                padding: 10px 10px 10px 10px;
                font-size: 16px;

                .left-2-head {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 30px;
                    border-bottom: 2px solid #D72122;
                    padding-bottom: 2px;

                    .left-2-head-text {
                        position: relative;
                        left: 7px;
                        top: -4px;
                        color: #212121;
                    }

                    .left-2-date {
                        position: relative;
                        top: 2px;
                        color: #C81716;
                    }
                }

                .left-2-box {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                    height: 41px;
                    border: 1px solid #666666;
                    margin-top: 10px;

                    .left-2-box-left {
                        width: 30px;
                        height: 100%;
                        background: #666666;
                        color: #ffffff;
                        font-size: 16px;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }

                    .left-2-box-right {
                        width: 283px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        font-size: 14px;
                        padding: 2px 10px;

                        .left-2-box-right-p {
                            display: flex;
                            justify-content: space-between;
                            cursor: pointer;

                            .date {
                                margin-right: 10px;
                            }

                            .desc {
                                display: inline-block;
                                width: 160px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                word-break: break-all;
                            }
                        }

                        .left-2-box-right-btn {
                            text-align: center;
                            background-color: #BB100F;
                            color: #ffffff;
                            font-size: 12px;
                            padding: 2px 4px;
                        }
                    }

                }
            }
        }

        .content {
            width: 342px;
            height: auto;

            .content-1 {
                width: 322px;
                height: 333px;
                border: 1px solid #CF1E1E;
                border-radius: 10px;
                margin-bottom: 10px;
                padding: 10px;
                color: #212121;

                .content-1-head {
                    display: flex;
                    align-items: center;
                    border-bottom: 2px solid #D72122;
                    padding-bottom: 2px;

                    .content-1-text {
                        margin-left: 7px;
                    }
                }

                .content-1-group {
                    padding: 0 10px 0 10px;
                    height: 314px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                }

                .content-1-cell {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    cursor: pointer;
                }

                .content-1-cell::before {
                    content: "";
                    display: inline-block;
                    position: relative;
                    top: 5px;
                    width: 6px;
                    height: 6px;
                    background-color: #BB100F;
                    border-radius: 50%;
                }

                .content-1-cell-1 {
                    position: absolute;
                    left: 10px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    width: 235px;
                }

                .content-1-cell-text {
                    color: #D72122;
                }


            }

            .content-2 {
                padding: 10px;
                width: 322px;
                height: 168px;
                border: 1px solid #BB100F;
                border-radius: 10px;
                margin-bottom: 12px;

                .content-2-head {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 2px solid #D72122;
                    padding-bottom: 2px;
                    position: relative;

                    .content-2-text {
                        position: absolute;
                        top: 8px;
                        left: 36px;
                    }

                    .content-2-sta {
                        margin-right: 10px;
                    }
                }

                .content-2-com {
                    margin: 0 auto;
                    width: 100%;
                    height: 127px;
                    margin-top: 6px;

                    .video {
                        position: relative;
                        border-radius: 5px;
                        overflow: hidden;
                        height: 127px;

                        .bofang {
                            width: 48px;
                            height: 48px;
                        }
                    }
                }

                .content-2-cell {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    color: #BB100F;
                    font-size: 14px;
                    margin-top: 8px;

                    .content-2-cell-title {
                        display: inline-block;
                        position: relative;
                        left: 4px;
                        top: -2px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        width: 200px;
                    }
                }
            }

            .content-3 {
                width: 342px;
                height: 153px;
                background: #DB1A3E;
                border-radius: 10px;
            }
        }

        .right {
            width: 301px;
            height: 553px;
            border: 1px solid #BB100F;
            border-radius: 10px;

            .right-1 {
                width: 100%;
                height: 174px;
            }

            .right-2 {
                padding: 13px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                height: 354px;
            }
        }
    }

    .floor2 {
        width: 100%;
        height: 166px;
        background: #FFFFFF;
        border: 1px solid #2D2D2D;
        border-radius: 10px;
        margin-top: 12px;
        display: flex;
        flex-direction: row;
        overflow: hidden;

        .floor2-left {
            width: 47px;
            height: 100%;
            color: #ffffff;
            font-size: 24px;
            font-weight: 400;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            line-height: 32px;
        }


        .floor2-right {
            padding: 12px 16px 9px 16px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            color: #2D2D2D;
            font-size: 16px;

            .floor2-right-head {
                width: 280px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                border-bottom: 2px solid #D72122;
                padding-bottom: 2px;
                color: #212121;

                .more {
                    cursor: pointer;
                }

                .more:hover {
                    color: #BB100F;
                }
            }

            .floor2-right-com {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 125px;
            }

            .floor2-right-cell {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding-left: 16px;

                .floor2-right-cell-title {
                    width: 210px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .floor2-right-cell:hover {
                color: #BB100F;
                cursor: pointer;
            }

            .floor2-right-cell::before {
                content: "";
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #BB100F;
                position: absolute;
                top: 4px;
                left: -1px;
            }

            .floor2-right-title {
                position: relative;
                top: -3px;
                left: 6px;
            }

            .floor2-right-zhibo {
                position: relative;
                left: 18px;
                top: -4px;
                font-size: 14px;
                font-weight: 400;
                color: #C81716;
            }

            .floor2-right-icon {
                position: relative;
                left: 22px;
                top: -2px;
            }

        }
    }
}

.activity {
    position: absolute;
    top: 0;
    left: -68px;
    display: flex;
    flex-direction: column;


    .tip {
        width: 41px;
        height: auto;
        background: #BB100F;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        padding: 12px 5px;

        .tip-com {
            display: flex;
            justify-content: space-around;
            margin-top: 11px;
            line-height: 18px;

            .title {
                font-size: 16px;
                font-weight: 400;
                color: #FDE5B1;
            }
        }
    }

}


.footer {
    width: 1000px;
    height: 163px;
    margin: 31px auto;
}

.menu {
    position: absolute;
    top: 0;
    right: -250px;
    width: 240px;
    height: auto;
    background: linear-gradient(180deg, #E44443, #BB100F);

    .menu-head {
        position: relative;
        width: 100%;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background: #0F72BB;
        color: #ffffff;

        .el-icon-arrow-down, .el-icon-arrow-up {
            position: absolute;
            right: 10px;
            top: 6px;
        }


    }

    .menu-common {
        height: auto;
        overflow: hidden;
        transition: all 1s ease;
    }

    .menu-active {
        height: 0px;
    }

    .menu-main {
        padding: 16px;

        .menu-box {
            margin-bottom: 20px;
            border: 1px #FDCC49 solid;
            font-size: 14px;
            color: #ffffff;

            h4 {
                font-size: 16px;
                width: 100%;
                height: 27px;
                line-height: 27px;
                text-align: center;
                background: linear-gradient(180deg, #FCEABB, #FFC87E);
                color: #A20808;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            ul {
                padding: 10px;
            }

            li {
                display: inline-block;
                width: 185px;
                line-height: 26px;
                cursor: pointer;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }

            li:hover {
                color: #FBFD49;
            }
        }
    }

    .menu-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 40px;

        .menu-footer-box {
            display: flex;
            font-size: 16px;
            margin-top: 17px;
        }

        .menu-footer-box-p {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 17px;

        }

        .menu-footer-title {
            font-weight: bold;
            color: #FFD62D;
        }

        .menu-footer-phone {
            font-weight: bold;
            color: #FFFFFF;
        }

    }
}

.Sidebar {
    position: fixed;
    right: calc((100% - 1000px) / 2 - 210px);
    width: 170px;
    padding: 10px 15px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #6B5656;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 500;


    .Sidebar-box {
        height: 38px;
        padding: 20px 0;
        display: flex;
        align-items: center;
        color: #ffffff;

        p:nth-child(2) {
            margin-top: 10px;
        }
    }

    .Sidebar-box:nth-child(1) {
        border-bottom: 1px solid #887171;
    }
}


</style>